import React, { useState, useEffect, Suspense } from 'react';
import
{
    BoxGeometry, Mesh, MeshBasicMaterial, TextureLoader,
    Scene, SphereGeometry, WebGLRenderer, ArrowHelper, Vector3, Camera, PerspectiveCamera
} from 'three';
import { Spin } from 'antd';
import scene_full from '../../assets/img/scene.jpeg';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { render } from '@testing-library/react';
import { useLoader } from 'react-three-fiber';
export default function WebVRSphereFun()
{
    const texture_1 = useLoader(TextureLoader, scene_full);
    const [myScene, setmyScene] = useState<HTMLDivElement>();
    const [scene, setscene] = useState(new Scene());
    const [camera, setcamera] = useState<PerspectiveCamera>(new PerspectiveCamera());
    const [renderer, setrenderer] = useState(new WebGLRenderer());

    const [geometrySphere, setgeometrySphere] = useState(new SphereGeometry(40, 50, 50));

    const [material, setmaterial] = useState(new MeshBasicMaterial({ map: (texture_1) }));
    const [control, setcontrol] = useState<OrbitControls>(new OrbitControls(camera, renderer.domElement));
    // //三根辅助箭头
    const arrowHelperY = new ArrowHelper(new Vector3(0, 1, 0), new Vector3(0, 0, 0), 10, 0x00ff00);
    const arrowHelperX = new ArrowHelper(new Vector3(1, 0, 0), new Vector3(0, 0, 0), 10, 0xff0000);
    const arrowHelperZ = new ArrowHelper(new Vector3(0, 0, 1), new Vector3(0, 0, 0), 10, 0x0000ff);
    const sphere = new Mesh(geometrySphere, material);


    const setUp = () =>
    {
        if (myScene !== undefined)
        {
            setcamera(
                new PerspectiveCamera(
                    75,
                    myScene.offsetWidth / myScene.offsetHeight,
                    0.1,
                    1000
                )
            );

            renderer.setSize(myScene.offsetWidth, myScene.offsetHeight);
            myScene.appendChild(renderer.domElement);

            scene.add(arrowHelperX);
            scene.add(arrowHelperY);
            scene.add(arrowHelperZ);

            // sphere.material.wireframe = true;
            sphere.geometry.scale(1, 1, -1);
            scene.add(sphere);

            camera.position.set(-5, 0, 300);
            camera.lookAt(scene.position);

            control.addEventListener("change", loop);
        }
    };
    const loop = () =>
    {
        renderer.render(scene, camera);
    };
    useEffect(() =>
    {
        setmyScene(
            document.getElementById("vrScene") as HTMLDivElement
        );

        setUp();

        loop();
    }, [myScene]);

    return (
        <Suspense fallback={<Spin />}>
            <div id="vrScene" style={{ width: "100%", height: "100%" }}>

            </div>
        </Suspense>

    );
}
